<template>
  <div class="bigBox">
    <topf />
   <div class="box">
      <div class="top">
      <Postdetail :themeMessage="theme" :userMessage="user" />
      </div>
      <div class="mid">
        <div class="_input">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </div>
        <div class="_button">
          <el-button round size="medium" @click="submit">发布</el-button>
        </div>
      </div>
      <div class="bottom">
        <div class="detail">
          <div class="right">
             <div v-if="replys.length>0">
                <div  v-for="(item , i) in replys">
                  <div class="userMessage">
                    <div class="headImg"></div>
                    <div class="userName">{{item.person.user_name}}</div>
                    <div class="time">{{item.reply_post.reply_post_createTime}}</div>
                  </div>
                  <div class="contain">
                    <div class="replyContain">{{item.person.user_name}}:{{item.reply_post.reply_post_content}}</div>
                  </div>
                </div>
                
             </div>
             <div v-else>
                  暂无回复
                </div>
          </div>
        </div>
      </div>
   </div>
   </div>
</template>

<script>
import Topf from '../../components/forumHome/Topf.vue'
import Postdetail from '../../components/post_detail/post_detail.vue'
import {searchThemebyId} from "../../api"
import {searchReplybyId} from "@/api";
import {addNewReply} from "@/api";
export default {
  components: { Postdetail,Topf },
  data () {
    return {
      textarea:'',
      theme_post_id:0,
      theme:{},
      user:{},
      replys:[]
    }
  },
  created () {
    this.theme_post_id = this.$route.params.id
    console.log("this.id",this.theme_post_id);
    let _temp = this.theme_post_id
    let that = this
    searchThemebyId(_temp).then(res=>{
      that.theme = res.data.data.theme_post
      that.user = res.data.data.person
      console.log("theme",that.theme);
    }).catch(() => {});
    this.getReply()
    
    },
    methods: {
      getReply(){
        let _temp = this.theme_post_id
        let that = this
        searchReplybyId(_temp)
        .then(res => {
          that.replys = res.data.data
          console.log("reply",res.data.data);
          
        }).catch(() => {});

      },
      submit(){
        let temp = this.textarea
        if(temp == '' || temp == null){
          alert("回复内容不能为空")
        }else{
          let _temp = this.theme_post_id
          let user_id = this.user.user_id
          this.textarea = ''
          addNewReply(_temp,user_id,temp)
            .then(res => {
              console.log(res);
            }).catch(() => {});
            this.getReply()
        }
      }
    }
}
</script>

<style lang="less" scoped>

  .bigBox{
    background-color: rgb(233, 233, 233);
    .box{
      width: 80%;
      margin: 20px auto;
      border-radius:10px ;
      .mid{
        margin: 30px;
        ._button{
          margin-top: 20px;
          margin-left: 80%;
        }
        border-bottom: 1px solid black;
      }
      .bottom{
        .detail{
          padding: 10px;
          border-bottom: 1px solid black;
          .right{
            background-color: #e4dddd;
            .userMessage{
              display: flex;
              flex-direction: row;
              .headImg{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                // background-color: #000;
              }
              div{
                margin: 10px;
                text-align: left;
              }
            }
            .contain{
               background-color: #fff;
              div{
                margin:0 20px;
                text-align: left;
              }
              .replyContain{
                font-family: 800;
                font-size: 30px;
               
              }
            }
          }
        }
      }
    }
  }
</style>